<?php

use yii\helpers\Html;
use backend\assets\PrintAsset;
PrintAsset::register($this);

$this->title = '仔猪增长异常统计';
use backend\modules\statistics\assets\EchartsAsset;
EchartsAsset::register($this);

?>
<style>
    .table>tbody> tr >td{
        height: 70px;
        line-height: 70px;
    }
</style>


<section class="wrapper site-min-height">
    <!-- page start-->
    <section class="panel">
        <header class="panel-heading">
            <?= Html::a('返回','javascript:history.back(-1)'); ?>  <?= Html::encode($this->title) ?>
        </header>
<div class="row">
    <div class="col-md-10 col-md-offset-1" style="margin-top: 70px">
        <button class="btn btn-primary btn-sm" style="margin-bottom: 10px" id="print">打印</button>
        <!--work progress start-->
        <section class="panel">
            <div class="panel-body progress-panel">
                <div class="task-progress">
                    <h1>生病死亡统计</h1>
                </div>
                <div class="task-option">
                </div>
            </div>
            <table class="table table-hover">
                <tbody>
                <tr>
                    <th>
                        批次
                    </th>
                    <th>
                        得病数
                    </th>
                    <th>
                        得病率
                    </th>
                    <th>
                        死亡数
                    </th>
                    <th>
                        死亡率
                    </th>
                    <th>
                        总数
                    </th>
                    <th>
                        统计图
                    </th>
                </tr>
                <?php foreach ($disea as $key => $row) { ?>
                    <tr>
                        <td>
                            <?= $row['batch'] ?>
                        </td>
                        <td>
                            <?= $row['num'] ?>
                        </td>
                        <td>
                            <?= $row['persentdisea'] ?>
                        </td>
                        <td>
                            <?= $row['die'] ?>
                        </td>
                        <td>
                            <?= $row['persentdie'] ?>
                        </td>
                        <td>
                            <?= $row['total'] ?>
                        <td>
                            <div style="width: 70px;height: 70px;" id="batch<?= $row['batch'] ?>">

                            </div>
                        </td>
                    </tr>
                <?php } ?>
                </tbody>
            </table>
        </section>
        <!--work progress end-->
    </div>
    <div class="col-md-8 col-md-offset-2">
        <div id="disease" style="width: 100%;height: 400px;">

        </div>
    </div>
</div>

    </section>
</section>
<script>
    <?php $this->beginBlock('disease') ?>



    //柱形图
    var option = {
        title : {
            text: '现阶段疾病类型感染数统计',
            subtext: '',
            x:'center'
        },
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : <?= json_encode($data['type']) ?>,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'感染数',
                type:'bar',
                barWidth: '60%',
                data:<?= json_encode($data['num']) ?>,
            }
        ]
    };

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('disease'));
    myChart.setOption(option);


    // 基于准备好的dom，初始化echarts实例
    <?php foreach ($disea as $key => $row) {?>
        var option<?=$row['batch']?> = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:[]
            },
            series: [
                {
                    name:'得病率',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '12',
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:<?= json_encode($row['show'])?>
                }
            ]
        };


        var myChart<?=$row['batch']?> = echarts.init(document.getElementById('batch<?=$row['batch']?>'));
        myChart<?=$row['batch']?>.setOption(option<?=$row['batch']?>);
    <?php } ?>

    <?php $this->endBlock('disease') ?>
    <?php $this->registerJs($this->blocks['disease'],\yii\web\View::POS_END) ?>
</script>




<script>
    <?php $this->beginBlock('js_end') ?>

    $(function(){
        $("#print").printPreview({
            obj2print:'#main-content',
            width:'810'
            /*optional properties with default values*/
            //obj2print:'body',     /*if not provided full page will be printed*/
            //style:'',             /*if you want to override or add more css assign here e.g: "<style>#masterContent:background:red;</style>"*/
            //width: '670',         /*if width is not provided it will be 670 (default print paper width)*/
            //height:screen.height, /*if not provided its height will be equal to screen height*/
            //top:0,                /*if not provided its top position will be zero*/
            //left:'center',        /*if not provided it will be at center, you can provide any number e.g. 300,120,200*/
            //resizable : 'yes',    /*yes or no default is yes, * do not work in some browsers*/
            //scrollbars:'yes',     /*yes or no default is yes, * do not work in some browsers*/
            //status:'no',          /*yes or no default is yes, * do not work in some browsers*/
            //title:'Print Preview' /*title of print preview popup window*/
        });

    });
    <?php $this->endBlock('jsend') ?>
    <?php $this->registerJs($this->blocks['js_end'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?>

</script>
